/**
 * 全局可复用的hooks函数(js逻辑复用)
 * hooks函数封装：
 * 1. 函数命名以：useXxx => use开头，小驼峰命名法
 * 2. 函数内部可以使用组合式api复用逻辑
 * 3. 对外返回数据或方法
 * 注意：不能使用defineProps等全局宏函数
 */
import { ref, onUnmounted } from 'vue'
import { showImagePreview, showSuccessToast, type FormInstance } from 'vant'
import { sendMobileCode } from '@/api/user'
import { followDoctor, getPrescriptionPic } from '@/api/consult'
import type { FollowType } from '@/types/consult'

/**
 * 发送验证码
 * @param formData
 * @returns
 */
const useSendCode = (formData: { mobile: string; password: string }) => {
  // 验证码
  const code = ref('')
  // 倒计时时间
  const time = ref(0)
  // 获取form组件实例
  const form = ref<FormInstance>()
  let timeId: number // 倒计时定时器ID
  const send = async () => {
    // 已经倒计时time的值大于0，60s内不能重复发送验证码
    if (time.value > 0) return
    // 发送前，单独校验手机号：验证不通过报错，阻止程序继续执行
    // form.value?.validate() 不传name值，校验整个表单（兜底校验）
    try {
      await form.value?.validate('mobile') // 只校验手机号
      // await form.value?.validate() // 校验所有
      // 校验通过
      const data = await sendMobileCode(formData.mobile, 'login')
      // 填入验证码（假的）
      code.value = data.code
      showSuccessToast('发送成功！')
      // 倒计时开始
      time.value = 60
      timeId = setInterval(() => {
        time.value--
        if (time.value <= 0) window.clearInterval(timeId)
      }, 1000)
    } catch (error) {
      console.log('校验失败：', error)
    }
  }
  // 组件销毁清除定时器（内存泄漏风险）
  onUnmounted(() => {
    window.clearInterval(timeId)
  })

  return { code, form, send, time }
}
/**
 * 关注
 * @param type
 * @returns
 */
const useFollow = (type: FollowType = 'doc') => {
  // 关注逻辑
  const loading = ref(false)
  // 说明：Common类型是医生列表和文章列表共同的参数的类型
  type Common = { id: string; likeFlag: 0 | 1 }
  // 只要传入的参数doc中包含id和likeFlag类型就是兼容的
  const follow = async (doc: Common) => {
    // 防止重复点击
    loading.value = true
    try {
      await followDoctor(doc.id, type) // 后台没存储
      doc.likeFlag = doc.likeFlag === 1 ? 0 : 1 // 取反
    } finally {
      // 无论 try / catch 结果如何都会执行的代码块
      loading.value = false
    }
  }

  // 返回页面需要的数据或者函数
  return {
    loading,
    follow
  }
}
/**
 * 查看处方单
 */
const useShowPre = () => {
  const showPre = async (id?: string) => {
    if (id) {
      const data = await getPrescriptionPic(id)
      // 查看处方单
      showImagePreview([data.url])
    }
  }

  return { showPre }
}

export { useSendCode, useFollow, useShowPre }
